<!DOCTYPE html>
<html lang="en">
	<head>
		<title>nTube 1.5</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="iwebkit-use-fruit-styled-layout" value="true;version=1">
		<meta name="description" content="nTube: Home.">
		<meta charset="UTF-8">
		<meta name="theme-color" content="#282828">
		<link rel="manifest" href="/manifest.json">
		<link rel="preload" href="resources/settings.js" as="script">
		<link rel="preload" href="resources/base.js" as="script">
        <link rel="preload" href="resources/commander.js" as="script">
		<link rel="apple-touch-icon" href="/resources/logos/ntube-logo-192.png">
		<script src="resources/settings.js"></script>
		<script src="resources/base.js"></script>
		<script src="resources/search.js"></script>
        <script src="resources/commander.js"></script>
		<link rel="stylesheet" type="text/css" href="resources/search.css"/>
		<link rel="stylesheet" type="text/css" href="resources/base.css"/>
        <link rel="stylesheet" type="text/css" href="resources/commander.css"/>
		<link rel="search"
      		type="application/opensearchdescription+xml"
      		title="Search not(You)Tube."
      		href="/nsearch.xml">
		<style id="poly-item-css">
			.poly-item {
				padding-left: 5px;
				box-shadow: 0 14px 28px rgba(255, 255, 255, 0.11), 0 10px 10px rgba(255, 255, 255, 0.08);
				border: 1px solid white;
				margin-bottom: 10px;
			}
		</style>
		<style id="body-css">
			body {
				background-color: black;
				color: white;
			}
		</style>
		<style>
			.menu {
				position: fixed;
   				top: 0;
   				margin: auto;
   				left: 0;
   				right: 0;
   				width: 100%;
				height: 32px;
				border-bottom: 1px solid green;
				margin-right: 0px;
				z-index: 15;
				display: flex;
			}
			.menu-item {
				flex: 1;
			}
			.poly-item-light {
				padding-left: 5px;
				box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
				border: 1px solid black;
				margin-bottom: 10px;
			}
			@-webkit-keyframes slide {
    			0% { background-position: 0% 0; }
    			100% { background-position: 100% 0; }
			}
			@-moz-keyframes slide {
   				0% { background-position: 0% 0; }
    			100% { background-position: 100% 0; }
			}
			@keyframes slide {
    			0% { background-position: 0% 0; }
    			100% { background-position: 100% 0; }
			}
		</style>
		<style id="_css_fonts">
			html {
				font-family: -apple-system, BlinkMacSystemFont, 'Product Sans', 'Google Sans', 'Segoe UI', 'Arial', sans-serif;
			}
		</style>
	</head>
	<body>
		<div id="-ntube-menu" class="menu">
			<div class="menu-item">
				<div style="display: inline-block;vertical-align: middle;margin-right: 5px;">
					<a href="/trending" title="Trending Videos">
						<img src="resources/icons/trending.svg" alt="trending" style="height: 2em; width: 2em;" decoding="async">
					</a>
				</div>
				<div style="display: inline-block;vertical-align: middle;margin-right: 5px; margin-bottom: 3px;">
					<a href="/settings" title="Settings">
						<img src="resources/icons/settings.svg" alt="settings" style="height: 2em; width: 2em;" decoding="async">
					</a>
				</div>
			</div>
			<div class="menu-item">
				<div style="height: 100%; display: flex;">
					<style>
					#search_overlay {
						z-index: 8;
						position: fixed;
						background-color: rgba(0,0,0,0.95);
						width: 100%;
						height: 100%;
					}
					.search_hidden {
						display: none;
						visibility: hidden;
					}
					#search_bar {
						background-color: inherit;
						color: inherit;
						border: none;
						border-left: 1px solid green;
						height: calc(100% - 4px);
						transition: border-bottom .5s ease-in-out;
						font-family: monospace;
						font-size: large;
						text-indent: 5px;
						flex-grow: 1;
						min-width: 50%;
					}
					#search_bar:focus {
						border-bottom: 1px solid green;
					}
					#search_button {
						border: none;
						border-left: 1px solid rgba(0,128,0,.7);
						border-right: none;
						height: 100%;
						background-color: inherit;
						color: inherit;
						margin-right: 0px;
						font-family: inherit;
					}
					</style>
					<input id="search_bar" type="text" name="Search nTube Bar." placeholder="Search nTube."></input>
					<button id="search_button" onclick="search_start(null);">Search</button>
				</div>
			</div>
			<script>
				run_promise(function() {
					SearchBar.init();
					id("_search_results").innerHTML = "";
				});
			</script>
		</div>
        <div id="commander_overlay" class="commander_overlay" style="display: none; visibility: hidden;">
            <div id="commander_main_div" class="commander_mdiv">
                <input id="commander_text_input" class="commander_text_box" type="text" value="" placeholder="nTube Commander."></input>
                <p class="commander_text_out" id="commnader_text_output" style="display: none; visibility: hidden;">Ready.</p>
            </div>
        </div>
		<div id="search_overlay" class="search_hidden">
			<div style="padding-bottom: 20px;"></div>
			<!--search_hidden-->
			<div style="width: 100%;">
				<div style="float: left;">
					<h1 style="line-height: 80%;">Search.</h1>
					<h3 style="line-height: 80%;">Searching for <span id="search_query_display_string">uhhh...nothing.</span>.</h3>
				</div>
				<div style="float: right;padding-right: 15px;padding-top: 35px;">
					<button style="width: 100px; height: 50px; border-radius: 30px; border: 1px solid green; background-color: inherit; color: inherit;" onclick="search_close()">Close.</button>
					<script>
						function search_close() {
							id("search_overlay").classList.add("search_hidden");
						}
					</script>
				</div>
				<div style="clear: both;"></div>
			</div>
			<div id="_search_results" class="poly-item" style="width: calc(100% - 30px); height: 78%; margin-right: 0px; overflow-y: auto;">
				<div class="search-item">
					<a class="search-link" href="#gotoShittyVideo">
						<img decoding="async" src="" alt="TOTALLY NOT CLICKBAIT" style="padding-left: 5px; display: inline; vertical-align: middle; width: 220px; height: 160px; margin-bottom: 5px;">
						<div style="padding-left: 15px; display: inline; vertical-align: middle;">
							<p style="position: absolute; display: inline; vertical-align: middle; font-size: large; margin-top: 15px;">
								CLICKBAIT TITLE 
							</p>
							<p style="position: absolute; display: inline; vertical-align: bottom; font-size: small; margin-top: 45px;">
								00:00 | -1 | <a href="#gotoShittyChannel">CHANNEL #2492049</a>
							</p>
						</div>
					</a>
				</div>
			</div>
			<center>
				<button id="_search_load_more">Load more.</button>
			</center>
			<script>
			id("_search_results").innerHTML = "";
			</script>
		</div>
		<style>
			#-general-loading {
				position: relative;
				top: 23.5px;
				left: 0px;
				z-index: 15;
				width: calc(100% + 18px);
				background-color: transparent;
				margin-left: -10px;
				margin-top: 0px;
			}
			#-general-loader {
				-webkit-animation: go 1s infinite alternate ease;
      			animation: go 1s infinite alternate ease;
			}
		</style>
		<div class="wrapper" id="-general-loading" style="display: none; visibility: hidden;">
			<div class="loader" id="-general-loader">
				<div></div>
				  <div></div>
				  <div></div>
				  <div></div>
				  <div></div>
				  <div></div>
				  <div></div>
				  <div></div>
				  <div></div>
			</div>
		</div>
		<div style="padding-bottom: 30px;"></div>
		<!--<div class="poly-item">
			<h3>
				<span style="color: red;">not</span><span style="color: lightgreen;">YouTube</span>.
			</h3>
			<p>
				A lightweight multiplatform client for various streaming services, now better than ever. <br>
				Now powered by nullUtil 3.0.
			</p>
		</div>-->
		<center>
			<h1 style="font-size: 42px;">
				<span style="color: red;">not</span><span style="color: lightgreen;"><span id="ntube-logo-you" style="color: lightgray;">You</span>Tube</span>.
				<sup style="font-size: medium;">1.5.0</sup> <br>
				<img decoding="async" id="ntube-winter-logo" src="resources/events/christmas.png" title="Merry Christmas!" style="display: none; visibility: hidden; 80px; height: 60px; position: absolute; top: 36px; left: calc(50% - 180px);"></img>
			</h1>
		</center>
		<center>
			<style>
				.good_a {
					color: inherit;
					text-decoration: underline inherit;
				}
			</style>
			<p id="-ntube-links">
				<a class="good_a" href="/about">About</a>
				&nbsp;&centerdot;
				<a class="good_a" href="/browser_check">Browser Checkup</a>
				&nbsp;&centerdot;
				<a class="good_a" href="/changelog">Changelog</a>
				&nbsp;&centerdot;
				<!--<a class="good_a" href="/tv">nTV</a>
				&nbsp;&centerdot;
				<a class="good_a" href="/music">nMusic<sub style="text-decoration: none;">infdev</sub></a>
				&nbsp;&centerdot;-->
				<a class="good_a" href="/settings">Settings</a>
				&nbsp;&centerdot;
				<a class="good_a" href="/trending">Trending</a>
			</p>
		</center>
		<noscript>
			<div class="poly-item" style="border: 1px solid orange;">
				<h3 style="margin-top: 5px; margin-bottom: 10px;" style="color: orange;">Warning.</h3>
				<p style="margin-top: 5px; margin-bottom: 5px;">You seem to be missing JavaScript support which greatly limits the features of nTube.</p>
				<p style="margin-top: 5px; margin-bottom: 5px;">Also, install Gentoo.</p>
			</div>
		</noscript>
		<div class="poly-item">
			<h3 style="margin-top: 5px; margin-bottom: 5px;">Subscriptions.</h3>
			<div id="-subscriptions-div" style="display: flex; flex-direction: row; flex-wrap: wrap;">
				<p id="-subscriptions-nothing-notice" style="margin-top: 5px; margin-bottom: 10px;">
					You don't seem to be subscribed to anyone.
				</p>
			</div>
		</div>
		<div id="--home-dev-info" class="poly-item" style="border: 1px solid orange; background: repeating-linear-gradient(45deg, transparent, rgba(235, 109, 5, 0.2) 8px)">
			<h3 style="margin-top: 5px; margin-bottom: 10px;">Under development!</h3>
			<p style="margin-top: 5px; margin-bottom: 10px;">
				This is a release candidate, things may break, planes may hit towers, you know. <br>
				You might want to visit <a href="/settings" style="color: inherit; text-decoration: gray underline;">Settings</a> to configure nTube. <br>
			</p>
			<b>Known Issues.</b>
			<ul>
				<li>nPlayerNX is still a beta and may behave incorrectly.</li>
				<li>YouTube livestreams are currently experimental.</li>
				<li>360 video support requires a rewrite and is experimental.</li>
				<li>Currently English is only supported, 1.6 will add localization support.</li>
				<li>Some spelling mistakes may still be present, blame late night coding for that.</li>
				<li>The currently provided filters are slightly out-of-date.</li>
				<li>Livestream chat is still experimental.</li>
				<li>The web server hasn't been hardened security-wise, exposing this to the open web might not be a good idea yet.</li>
				<li>The web server doesn't play well with services like Cloudflare, which cache content.</li>
				<li>Some browsers cannot handle lazy domains for the OpenSearch entry. <i style="font-family: monospace;">(WONT_FIX)</i></li>
			</ul>
			<p style="margin-top: 5px; margin-bottom: 10px;">Found a different bug? Report it on the issue tracker!</p>
		</div>
		<style id="ntube-custom-css"></style>
		<script>
		function hasSettings() {
			try {
				const y = Settings.load("ntube_settings");
				return y !== null && isJson(y);
			}catch (e) {
				console.error(e);
				return false;
			}
		}
		try {
			nTube.init();
			nTube.initTheming();
		}catch (e) {}
		console.debug("Loading settings...");
		const setObject = nTubeSettings.auto();
		window.__SETTINGS_OBJECT = setObject;
		window.Config = window.__SETTINGS_OBJECT; // COMPAT HACK
		if (window.__SETTINGS_OBJECT.appearance.enable_new_look) {
			id("poly-item-css").innerHTML = ".poly-item {padding-left: 5px; box-shadow: 0 14px 28px rgba(255, 255, 255, 0.08), 0 10px 10px rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 10px;}";
			try {
				id("collapsible-css").innerHTML = ".active, .collapsible:hover {background-color: rgba(80, 80, 80, 0.3);}";
			}catch (e) {
			}
		}
		if (window.__SETTINGS_OBJECT.appearance.custom_css) {
			try {
				id("ntube-custom-css").innerHTML = base64Decode(window.__SETTINGS_OBJECT.appearance.custom_css);
			}catch (e) {
				console.error(e);
			}
		}
		if (window.__SETTINGS_OBJECT.appearance.use_newer_ui_preset) {
			try {
				id("body-css").innerHTML = "body {background-color: #111111; color: white;}";
			}catch (e) {
				console.error(e);
			}
		}
		if (setObject.global && setObject.global.subscriptions) {
			run_promise(function() {
				show(id("-general-loading"));
				id("-subscriptions-nothing-notice").innerHTML = "Loading...";
				const sdiv = id("-subscriptions-div");
				sdiv.innerHTML = "";
				const subscriptions = setObject.global.subscriptions;
				for (var i = 0; i < subscriptions.length; i++) {
					const subscription = subscriptions[i];
					const e = document.createElement("div");
					e.setAttribute("channelID", subscription.channelID);
					e.classList.add("poly-item", "subscriptions-div-poly");
					const tl = document.createElement("div");
					const pfp = document.createElement("img");
					pfp.decoding = "async";
					pfp.loading = "lazy";
					pfp.classList.add("subscriptions-profile-picture");
					pfp.src = subscription.avatarURL;
					tl.appendChild(pfp);
					const cnm = document.createElement("h4");
					cnm.classList.add("subscriptions-channel-name");
					cnm.innerHTML = subscription.channelName;
					tl.appendChild(cnm);
					e.appendChild(tl);
					const vids = document.createElement("div");
					vids.classList.add("subscriptions-video-container");
					request("/api/channel?c=" + subscription.channelID + "&sub&backend=channel-sub", null, function(error) {
						console.error("Error while fetching: " + subscription.channelID, error);
					}, function(data) {
						const jsonObject = JSON.parse(data);
						for (var iv = 0; iv < jsonObject.videos.length; iv++) {
							const vid = jsonObject.videos[iv];
							console.debug("videoID: " + vid["videoID"] + ", lastVideoID: " + subscription.lastVideoID);
							if (vid["videoID"] === subscription.lastVideoID) {
								if (iv === 0) {
									vids.innerHTML = "";
									const upd = document.createElement("p");
									upd.innerHTML = "You are up to date!";
									upd.style.marginLeft = "5px";
									upd.style.marginBottom = "5px";
									upd.style.marginTop = "5px";
									vids.appendChild(upd);
								}
								break;
							}
							const vidDiv = document.createElement("div");
							vidDiv.classList.add("poly-item", "subscriptions-video");
							const mainImg = document.createElement("img");
							mainImg.decoding = "async";
							mainImg.loading = "lazy";
							mainImg.classList.add("subscriptions-video-img");
							mainImg.src = vid["thumbnail"];
							mainImg.onclick = function() {
								window.location = vid["url"];
							}
							const title = document.createElement("h3");
							title.innerHTML = vid["title"];
							title.classList.add("subscriptions-video-title");
							vidDiv.appendChild(mainImg);
							vidDiv.appendChild(title);
							vids.appendChild(vidDiv);
						}
						e.appendChild(vids);
						sdiv.appendChild(e);
					});
				}
				hide(id("-general-loading"));
			});
		}
		if (!wantsReducedMotion() && !isBattery()) {
			run_promise(function() {
				const po = "slide 20s infinite linear forwards";
				id("--home-dev-info").style.backgroundSize = "101vh 100%";
				id("--home-dev-info").style.animation = po;
				id("--home-dev-info").style.mozAnimation = po;
				id("--home-dev-info").style.webkitAnimation = po;
			});
		}
		</script>
		<style>
			.subscriptions-profile-picture {
				width: 35px;
				height: 35px;
				vertical-align: middle;
				display: inline-block;
			}
			.subscriptions-channel-name {
				vertical-align: middle;
				display: inline-block;
				margin-bottom: 5px;
				margin-top: 5px;
				margin-left: 5px;
			}
			.subscriptions-div-poly {
				width: 100%;
				padding-left: 0px;
				margin-bottom: 5px;
				margin-right: 5px;
			}
			.subscriptions-video-img {
				width: 160px;
				height: 90px;
			}
			.subscriptions-video-title {
				margin-top: 5px;
				margin-bottom: 5px;
				text-align: center;
			}
			.subscriptions-video {
				margin-left: 5px;
				margin-top: 5px;
				margin-bottom: 5px;
				padding-left: 0px;
			}
			.subscriptions-video-container {
				overflow-y: hidden;
				display: flex;
				flex-wrap: nowrap;
				flex-direction: row;
			}
			.-webapp-disconnected {
				z-index: 100;
				position: fixed;
				bottom: 0px;
				left: 0px;
				background-color: #111111;
				color: white;
				width: 100%;
				padding: 5px;
			}
			.wrapper {
  				position: relative;
  				width: 100%;
  				height: 2px;
  				left: 0;
  				right: 0;
  				bottom: 0;
  				top: 0;
				margin: 0;
				margin-left: -5px;
				margin-top: -5px;
				background-color: green;
			}
			.loader {
  				height: 100%;
  				display: flex;
  				-webkit-transform: translateZ(0);
      			transform: translateZ(0);
			}
			.loader div {
  				flex: 1;
  				background: salmon;
  				-webkit-animation: go 0.8s infinite alternate ease;
      			animation: go 0.8s infinite alternate ease;
  				box-shadow: 0 0 20px salmon;
			}
			.loader div:nth-child(1) {
  				-webkit-animation-delay: -0.72s;
      			animation-delay: -0.72s;
			}
			.loader div:nth-child(2) {
  				-webkit-animation-delay: -0.64s;
      			animation-delay: -0.64s;
			}
			.loader div:nth-child(3) {
  				-webkit-animation-delay: -0.56s;
     			animation-delay: -0.56s;
			}
			.loader div:nth-child(4) {
  				-webkit-animation-delay: -0.48s;
      			animation-delay: -0.48s;
			}
			.loader div:nth-child(5) {
  				-webkit-animation-delay: -0.4s;
     			animation-delay: -0.4s;
			}
			.loader div:nth-child(6) {
				-webkit-animation-delay: -0.32s;
				animation-delay: -0.32s;
			}
			.loader div:nth-child(7) {
				-webkit-animation-delay: -0.24s;
				animation-delay: -0.24s;
			}
			.loader div:nth-child(8) {
				-webkit-animation-delay: -0.16s;
				animation-delay: -0.16s;
			}
			.loader div:nth-child(9) {
				-webkit-animation-delay: -0.08s;
				animation-delay: -0.08s;
			}
			.loader div:nth-child(10) {
				-webkit-animation-delay: 0s;
				animation-delay: 0s;
			}
			@-webkit-keyframes go {
				100% {
  				 	background: transparent;
  				  	flex: 10;
  				  	box-shadow: 0 0 0 transparent;
				}
			}
			@keyframes go {
				100% {
  				 	background: transparent;
  				  	flex: 10;
  				  	box-shadow: 0 0 0 transparent;
				}
			}
		</style>
		<div id="-webapp-disconnected-div" class="-webapp-disconnected" style="display: none; visibility: hidden; opacity: 0;">
			<div class="wrapper" id="-webapp-disconnected-loader">
				<div class="loader">
					<div></div>
				  	<div></div>
				  	<div></div>
				  	<div></div>
				  	<div></div>
				  	<div></div>
				  	<div></div>
				  	<div></div>
				  	<div></div>
				</div>
		 	</div>
			<h3 style="margin-top: 5px; margin-bottom: 5px;">Reconnecting with nTube's instance...</h3>
			<p style="margin-top: 5px; margin-bottom: 5px;">This will only take a moment.</p>
		</div>
		<script>
			try {
				Array.prototype.some=[].some||function(a,b,c,d){for(c=0,d=this;c<d.length;c++)if(a.call(b,d[c],c,d))return!0;return!1};
				function isPWA() {
					if (!window.matchMedia) return false;
  					return ["fullscreen", "standalone", "minimal-ui"].some(function (displayMode) {
    					return window.matchMedia('(display-mode: ' + displayMode + ')').matches;
  					});
				}
				if (isPWA()) {
					show(id("-webapp-disconnected-div"));
					fadein(id("-webapp-disconnected-div"), function() {
						id("search_button").disabled = true;
						id("-ntube-links").style.pointerEvents = "none";
						id("-ntube-menu").style.pointerEvents = "none";
						function pwa_check_loop() {
							request("/api/pwa/present", function(error) {
								console.error("Failed to get an instance connection!", error);
								sleep(1000);
								pwa_check_loop();
							}, function(data) {
								const o = JSON.parse(data);
								if (o["present"]) {
									id("search_button").disabled = false;
									id("-ntube-links").style.pointerEvents = "";
									id("-ntube-menu").style.pointerEvents = "";
									fadeout(id("-webapp-disconnected-div"), function() {
										hide(id("-webapp-disconnected-div"));
									});
								}
							});
						}
						pwa_check_loop();
					});
				}
			}catch (e) {
				console.error(e);
			}
		</script>
	</body>
</html>
